<template>
    <CRow>
        <CCol >
            <CCard>
                <CCardHeader>
                    <strong>卷帘</strong>

                </CCardHeader>
                <CCardBody>
                    <div class="beforeafter" @mousemove='RollImage($event)'>
                        <div id="after"></div>
                        <div id="before" ref="before">
                            <CButton color="info" class="btn btn-pill btn-light" @mousedown="dragMe" @mouseup="stopDragging"><span class="cib-flickr btn-icon mr-2"></span></CButton>

                        </div>
                    </div>
                </CCardBody>

            </CCard>
        </CCol>

    </CRow>
</template>

<script>
    export default {
        name: "rolling-images",
        data() {
            return {
                dragging: false,
            };
        },
        methods: {
            dragMe(){
                this.dragging = true
            },
            stopDragging(){
                this.dragging = false

            },
            RollImage(e) {
                if(this.dragging){
                    // console.log(e);
                    // let x = e.changedTouches[0].pageX;
                    let x = e.pageX;
                    // console.log(e.pageX);

                    // console.log(e.target);
                    this.$refs.before.style.width = x-306+"px";
                    // this.$refs.before.style.backgroundSize = x-306+"px "+100+"%";
                }


            }
        }
    }
</script>

<style scoped>
    .beforeafter{
        position: relative;
        width: 500px;
        height: 400px;
    }
    #after{
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(/img/component/bg1.jpg);
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        -moz-background-size:100% 100%;
        background-size:100% 100%;
        background-position: center;
    }
    #before{
        position: absolute;
        top: 0;
        left: 0;
        border-right: 3px solid #fff;
        background-image: url(/img/component/bg2.jpg);
        width: 50%;
        height: 100%;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-position: left;
        max-width: 100%;
        -moz-background-size:auto 100%;
        background-size:auto 100%;
    }

    #before button{
        position: absolute;
        top: 50%;
        right: 0;
        margin-right: -17px;
        margin-top: -17px;

    }

</style>